<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue001</title>
		<style>
			.paddingTop {
				margin: 0 auto;
				text-align: center;
				padding-top: 30px;
			}
		</style>
	</head>
	<body>
		<!--
        	作者：tendeness@foxmail.com
        	时间：2018-10-23
        	描述：这里直接显示字符
        -->
		<div id="app" class="paddingTop">
			{{message}}
		</div>
		
		<!--
        	作者：tendeness@foxmail.com
        	时间：2018-10-23
        	描述：这里是学习v-bind 指令
        -->
		<div id="app2" class="paddingTop">
			<span v-bind:title="message">
				鼠标悬停几秒即可查看
			</span>
		</div>
		
		<!--
        	作者：tendeness@foxmail.com
        	时间：2018-10-23
        	描述：这里学习的是if条件判断，以及可见性的设置
        -->
		<div id="app3" class="paddingTop">
			<span v-if="visable">设置可见性，{{message}}</span>
		</div>
		
		<!--
        	作者：tendeness@foxmail.com
        	时间：2018-10-23
        	描述：这里是循环
        -->
		<div id="app4" class="paddingTop">
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
		</div>
		
		<!--
        	作者：tendeness@foxmail.com
        	时间：2018-10-23
        	描述：这里学的是事件处理
        -->
		<div id="app5" class="paddingTop">
			<p>{{ message }}</p>
			<button v-on:click="change">改变文字</button>
		</div>
		
		<!--
        	作者：tendeness@foxmail.com
        	时间：2018-10-23
        	描述：这里学习的是双向绑定
        -->
		<div id="app6" class="paddingTop">
			<p>{{ message }}</p>
			<input v-model="message" v-bind:placeholder="placeholder" />
		</div>
		
	</body>
	<script src="https://vuejs.org/js/vue.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				message:'Hello Vue'
			}
		})
		
		var app2 = new Vue({
			el:'#app2',
			data:{
				message:'显示字符' + new Date().toLocaleString()
			}
		})
		
		var app3 = new Vue({
			el:'#app3',
			data:{
				visable:true,
				message:'显示字符' + new Date().toLocaleString()
			}
		})
		
		var app4 = new Vue({
			el:'#app4',
			data:{
				todos:[
					{ text:'学习 JavaScript' },
					{ text:'学习 Vue' },
					{ text:'学习 webpack' },
					{ text:'学习 springboot' }
				]
			}
		})
		
		var app5 = new Vue({
			el:'#app5',
			data:{
				message:'Hello Vue！'
			},
			methods: {
				change:function(){
					this.message = '你好  Vue！' + new Date().toLocaleString()
				}
			}
		})
		
		var app6 = new Vue({
			el:'#app6',
			data:{
				message:'默认初始值',
				placeholder:'请输入一个值'
			}
		})
	</script>
</html>
